<template>
	<view class="bg">
		<!-- 顶部状态 -->
		<view class="top">{{data.state ? '订单已完成':'订单未完成'}}</view>
		<!-- 商品 -->
		<view class="body">
			<text class="name">{{data.name}}</text><br>
			<view class="imagebox">
				<view class="imgbox"><img :src="`${IMG_URL}${data.img}`" class="image"></view>
				<view class="text-container"><text class="text-content">{{data.desc}}</text></view><br>
				<view class="num"><text>×{{data.num}}</text></view>
			</view>

			<button class="btn" @click="book">再次购买</button>
		</view>
		<!-- 订单详情 -->
		<view class="detail">
			<view class="title">订单信息</view>
			<view>购买数量<text>{{data.num}}</text></view>
			<view>订单总价<text>￥{{data.price}}</text></view>
			<view class="pay">实付金额<text>￥{{data.price}}</text></view>
			<view>订单号码<text>{{data.id}}</text></view>
			<view>下单时间<text>{{data.time}}</text></view>
			<view>支付方式<text>在线支付</text></view>
		</view>
	</view>
</template>

<script setup>
	import {
		userStore
	} from '../../store/userstore.js'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		IMG_URL
	} from "@/utils/imgStatic";
	import {
		http
	} from '../../http.js'

	const store = userStore()
	const orderId = store.detailorderlId
	const data = reactive({
		name: '',
		img: '',
		desc: '',
		num: 0,
		price: '',
		id: '',
		time: '',
		travelId: 0,
		state:0
	})
	const showDetail = async () => {
		console.log(orderId, '订单ID');
		const res = await http({
			url: 'http://localhost:3000/order/getOderByOrderId',
			method: "POST",
			data: {
				orderlId: orderId,
			}
		})
		if (res.code == 200 && res.msg == 'success') {
			console.log(res.data[0]);
			data.name = res.data[0].name
			data.desc = res.data[0].description
			data.img = res.data[0].img
			data.num = res.data[0].number
			data.price = res.data[0].totalprice
			data.id = res.data[0].orderlId
			const date = new Date(res.data[0].createdAt)
			const formattedTime =
				`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`
			data.time = formattedTime;
			data.travelId = res.data[0].travelId
			data.state = res.data[0].state
		} else {

		}
	}
	showDetail()

	const book = async () => {
		store.detailtravelId = data.travelId
		uni.navigateTo({
			url: '/pages/travel/detail'
		})
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-color: #f1f1f1;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.top {
		font-size: 23px;
		padding: 20px;
		background-color: #fff;
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		margin: 0px 10px;
	}

	.body {
		padding: 15px;
		background-color: #fff;
		margin: 10px;
		border-radius: 15px;
		line-height: 30px;
	}

	.name {
		padding-left: 5px;
		font-size: 18px
	}

	.image {
		width: 75px;
		height: 75px;
		border-radius: 15px;
	}

	.imagebox {
		position: relative;
		display: inline-block;
		padding: 5px;
		width: 330px;
	}

	.imgbox {
		display: inline-block;
	}

	.text-container {
		position: absolute;
	  width: 240px; /* 设置固定宽度 */  
	  height: 50px; /* 设置固定高度 */  
	   display: inline-block;
	   overflow: hidden; /* 隐藏超出部分 */
	   text-overflow: ellipsis; /* 用省略号表示被截断的文本 */ 
	   line-height: 17px;
	   font-size: 13px;
	   top:5px;
	   left: 85px;
	} 
	.text-content {  
	  width: 100%; /* 继承父容器的宽度 */  
	  
	}

	.num {
		position: absolute;
		left: 90px;
		top: 50px;
		font-weight: bold;
	}

	.btn {
		border-radius: 550px;
		background-color: #1E90FF;
		color: white;
		margin-top: 5px;
		width: 300px;
		height: 30px;
		line-height: 30px;
		font-size: 16px;
	}

	.detail {
		padding: 15px;
		background-color: #fff;
		margin: 10px;
		border-radius: 15px;
		line-height: 30px;
	}

	.detail>view {
		padding: 3px;
		color: #4f4f4f;
	}

	.detail>view>text {
		font-weight: bold;
		display: inline-block;
		float: right;
	}

	.title {
		font-size: 18px;
		padding-bottom: 10px;
		color: black;
		font-weight: bold;
	}
</style>
